<template>
    <view>
        <view class="swiper-item1" v-for="(item,index) in arr" :key="index">
            <view class="swiper-item">
                <view class="item1">
                    <view class="Src">
                        <image :src="item.imgSrc"></image>
                    </view>
                </view>
                <view class="item2">
                    <view class="title">
                        <view class="Names">{{item.name}}</view>
                        <view class="bianHao">
                            <text>编号：</text>
                            <text>{{item.id}}</text>
                        </view>
                    </view>
                    <view class="title">
                        <view class="right">
                            <text>￥单价：</text>
                            <text>{{item.price}}</text>
                        </view>
                        <view class="right">
                            <text>数量：</text>
                            <text>{{item.num}}</text>
                        </view>
                        <view class="right">
                            <text>￥总价：</text>
                            <text>{{item.goodsPrice}}</text>
                        </view>
                    </view>
                </view>
            </view>
<!--           <view class="hang">-->
<!--               <view class="payMoney" @click="payment">-->
<!--                   状态-->
<!--               </view>-->
<!--           </view>-->
        </view>
        <view class="han">
            <view class="moneyAll">
                <text>￥总价：</text>
                <text :data="priceAll">{{priceAll}}</text>
            </view>
            <view class="payMoney" @click="payment">
                确认支付
            </view>
        </view>
        <view class="loveTitle">你可能会喜欢？</view>
        <view class="Content">
             <view class="pubuLeft" v-for="item in arr2" @click="picture" :key="index">
                 <image :src="item.imgSrc"></image>
                 <text class="titleName">{{item.name}}</text>
             </view>
            <view class="pubuRight" v-for="item in arr3" :key="index" @click="picture">
                <image :src="item.imgSrc"></image>
                <text class="titleName">{{item.name}}</text>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "xiangQing",
        data() {
            return {
                arr:[],
                arr2:[],
                arr3:[],
                priceAll:0,
                Inv:0
            }
        },
        created() {
            this.priceAll=0;
            let  Arr= getApp().globalData.ddsendArr;
            this.arr=Arr;
            for(let i=0;i<this.arr.length;i++){
                this.priceAll=this.arr[i].goodsPrice+this.priceAll;
            }
            let _this=this
            uni.request({
                url:'http://101.37.175.158:8888/dd',
                success(res){
                    for (let i=0;i<res.data.goods.length;i++){
                        let a=parseInt(res.data.goods.length/2)
                        if(i<=a){
                            _this.arr2.push(res.data.goods[i])
                        }else {
                            _this.arr3.push(res.data.goods[i])
                        }
                    }
                }
            })
        },
        methods: {
            payment(){
                uni.showModal({
                    title: '提示',
                    content: '您确定要支付吗？',
                    success:(res)=> {

                        if (res.confirm) {
                            uni.showModal({
                                title: '提示',
                                content: '支付成功！',
                            })
                        } else if (res.cancel) {
                            uni.showModal({
                                title: '提示',
                                content: '已取消支付！',
                            })
                        }
                    }
                });
            },
             picture(){
                 uni.switchTab({
                     url: '/pages/index/diandan/diandan'
                 });
             }
        }
    }

</script>

<style scoped>
    .swiper-item{
        display: flex;
        justify-content: space-between;
        width: 700rpx;
        margin: 20rpx auto;
    }
    .item1{
        width: 200rpx;
        display: flex;
        margin-left: 20rpx;
        align-items: center;
        text-align: center;
    }
    .item2{
        width: 450rpx;
        display: flex;
        justify-content: space-between;
        /*border: 1rpx solid #5475A3;*/
    }
    .title{
        width: 200rpx;
        margin: 5rpx;
    }
    .Names{
        width: 200rpx;
        height: 60rpx;
        margin-top: 10rpx;
        line-height: 60rpx;
        text-align: center;
        border: 1rpx solid #5475A3;
    }
    .bianHao{
        margin-top:120rpx;
        text-align: center;
        line-height: 60rpx;
        width: 200rpx;
        height: 60rpx;
        border: 1rpx solid #5475A3;
    }

    .Src{
        border: 1rpx solid #FEDE33;
        width: 250rpx;
        height: 200rpx;
    }
    .Src image{
        width: 200rpx;
        height: 200rpx;
    }
    .right{
        width: 200rpx;
        height: 60rpx;
        line-height: 60rpx;
        margin:20rpx 0;
        border: 1rpx solid #5475A3;
        text-align: center;
    }
    text{
        font-size: 24rpx;
    }
    .loveTitle{
        border: 1rpx solid #FEDE33;
        color: red;
        height: 80rpx;
        width: 500rpx;
       margin: auto;
        line-height: 80rpx;
        text-align: center;
        border-radius: 10rpx;
    }
    .pubuLeft{
        width: 322rpx;
        height: 380rpx;
        border: 1rpx solid #5475A3;
    }
    .pubuLeft,.pubuRight{
        margin: 12rpx;
        background-color: rgba(73,81,78,0.12);
    }
    .pubuRight{
        width: 322rpx;
        height: 380rpx;
        border: 1rpx solid #5475A3;
    }
    .pubuLeft image{
        width: 320rpx;
        height: 320rpx;
    }
    .pubuRight image{
        width: 320rpx;
        height: 320rpx;
    }
    .Content{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    .titleName{
        margin: 10rpx auto;
        font: bold;
    }
    .payMoney{
        width: 200rpx;
        height: 60rpx;
        background-color: #FA654F;
        border-radius: 30rpx;
        margin: 10rpx auto;
        text-align: center;
        line-height: 60rpx;
    }
    .swiper-item1{
        width: 710rpx;
        margin: 20rpx auto;
        background-color: rgba(73,81,78,0.12);
        border: 1rpx solid #5475A3;
    }
    .moneyAll{
        width: 400rpx;
        height: 60rpx;
        margin: 10rpx auto;
        text-align: center;
        line-height: 60rpx;
    }
    .han{
        position: fixed;
        bottom: 0;
        width: 100%;
        height: 80rpx;
        text-align: center;
        display: flex;
        justify-content: space-around;
        background-color:#cfaa79;
    }
    .hang{
        width: 100%;
        height: 80rpx;
        text-align: right;
        display: flex;
        justify-content: space-around;
    }
    .moneyAll text{

        font-size: 32rpx;
        font-weight: bold;
    }
    .bianHao text{
        font-size: 32rpx;
    }
    .right text{
        font-size: 32rpx;
    }
</style>